<template>
<!-- 顶部 -->
<div class="search">
    <div class="search-top">
        <!-- 回退按钮 -->
        <svg class="icon" aria-hidden="true" @click="$router.go(-1)">
            <use xlink:href="#icon-zuojiantou"></use>
        </svg>
        <input type="text" placeholder="  liangzai" @keydown.enter="savekeyword" v-model="searchKeyword">
    </div>
    <!-- 搜索历史 -->
    <div class="history">
        <div class="hisrtory-left">
            history
        </div>
        <!-- 渲染历史搜索 -->
        <div class="history-right">
            <div class="keywordItem" v-for="(item,i) in keywordlist" :key="i">{{item}}</div>
        </div>
    </div>
</div>
<div class="playlist" v-show="searchSongs.length!==0">
<!-- <div class="playlist" > -->
    <div class="playlist-top">
        <div class="left">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-bofang1"></use>
            </svg>
            <div class="detail">
                <div class="title">播放全部</div>
                <div class="number">（共{{searchSongs.length}}首）</div>
            </div>
        </div>
    </div>
    <!-- 搜索出来的歌曲列表 -->
    <div class="playlist-bottom">
        <div class="playItem" v-for="(item,i) in searchSongs" :key="i">
            <div class="left">
                <div class="index">{{i+1}}</div>
                <div class="content">
                    <div class="title">{{item.name}}</div>
                    <div class="author">
                        <span class="name">{{item.artists[0].name}}</span>
                    </div>
                </div>
            </div>
            <div class="right">
                <svg class="icon" aria-hidden="true" @click="$router.push({ path: '/PlayMusic', query: { id:item.id }}) ">
                <!-- <svg class="icon" aria-hidden="true">  -->
                    <use xlink:href="#icon-bofang1"></use>
                </svg>
                <!-- <div class="play">
                    <audio controls :ref="audio" :src="` https://music.163.com/song/media/outer/url?id=${item.id}.mp3`" @canplay="getDuration" @pause="pause" @timeupdate="timeupdata" @play="play" />
                </div> -->
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-liebiao-dian"></use>
                </svg>
            </div>
        </div>
    </div>
</div>
</template>

<script>
import { onBeforeMount,onMounted, reactive, ref } from 'vue'
import {SearchMusic} from '../api/index'

export default {
    setup() {
        var keywordlist = reactive([]);
        var searchKeyword = ref('');
        var searchSongs = reactive([]);
        const audio = ref();

        const audioPlay=function (){
            // audio.value.play();
        };


        onBeforeMount(()=>{
            keywordlist = JSON.stringify(localStorage.keywordlist)
            console.log(keywordlist)
        });

        async function savekeyword(){
            this.keywordlist.push(this.searchKeyword);
            this.keywordlist=Array.from(new Set(this.keywordlist));
            if(this.keywordlist.length>10){
                this.keywordlist = this.keywordlist.slice(this.keywordlist.length-10,this.keywordlist.length)
            }
            //使用localstorage保存数据
            localStorage.keywordlist = JSON.stringify(this.keywordlist);
            this.keywordlist = JSON.parse(localStorage.keywordlist);
            var result = await SearchMusic(this.searchKeyword);
            this.searchSongs=result.data.result.songs;
            console.log(result);
            console.log(this.searchSongs[1].id);
            console.log(this.keywordlist);
        };
        console.log(keywordlist);

        onMounted(()=>{
            console.log(audio)
            audioPlay();
        })

        return {
            keywordlist,
            searchKeyword,
            searchSongs,
            audio,
            // data,
            savekeyword,
        }
    }
}
</script>

<style lang="less" scoped>
body{
    background-color: #fff;
}
.search{
    width: 7.5rem;
    padding: 0 0.3rem;
    .search-top{
        display: flex;
        width: 100%;
        height: 0.8rem;
        .icon{
            width: 0.7rem;
        }
        input {
            flex: 1;
            margin-left: 0.36rem;
            background-color: #eee;
            // width: 7rem;
            font-size: 0.4rem;
            border: 0;
            outline: 0;
            border-bottom: 0.01rem solid #666;
        }
    }
    .history{
        display: flex;
        .hisrtory-left{
            text-align: center;
            // background-color: #fff;
            // border-radius: 0.3rem;
            width: 1.8rem;
            height: 0.8rem;
            // border: 0.01rem solid #fff;
            margin: 0.4rem;
            line-height: 0.8rem;
            font-size: 0.36rem;
            font-weight: 800;
        }
        .history-right{
            width: 6rem;
            height: auto;
            display: flex;
            color: #666;
            margin: 0.3rem 0rem;
            flex-wrap: wrap;        
            .keywordItem{
                background-color: #fff;
                line-height: 0.6rem;
                border-radius: 0.3rem;
                font-size: 0.36rem;
                height: 0.6rem;
                padding: 0 0.2rem;
                margin: 0.2rem 0.2rem 0 0;
            }
        }
    }
}
.playlist{
    background-color: #fff;
    width: 7.5rem;
    height: auto;
    display: flex;
    flex-direction:column;
    margin-top: 0.26rem;
    .playlist-top{
        // height: 1rem;
        display: flex;
        .left{
            height: 1rem;
            display: flex;
            flex-direction: row;
            margin-left: 0.3rem;
            .icon{
                width: 0.5rem;
            }
            .detail{
                display: flex;
                flex-direction: row; 
                align-items: center;
                margin-left: 0.2rem;
            }
        }
    }
    .playlist-bottom{
        .playItem{
            width: 100%;
            height: 1rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 0.2rem;
            .index{
                width: 0.25rem;
                line-height: 1rem;
                margin-left: 0.3rem;
                // text-align: center;
            }
            .left{
                display: flex;
                flex: 1;
                font-size: 0.3rem;
                align-items: center;
                .content{
                    margin-left: 0.4rem;
                }
                .title{
                    // font-size: 0.3rem;
                    font-weight: 800;
                    margin-bottom: 0.03rem;
                }
                .author{
                    .name{
                        color: rgb(136, 125, 125);
                    }
                }
            }
            .right {
                display: flex;
                .play{
                    position: relative;
                    top: 0.24rem;
                    width: 0.5rem;
                    height: 0.5rem;
                    border-radius: 0.3rem;
                    overflow: hidden;
                    audio {
                        position: relative;
                        left: -0.1rem;
                        top:-0.1rem
                    }
                }
                .icon{
                    margin-right: 0.12rem;
                    width: 0.6rem;
                    color: #bbb;
                }
            }
        }
    }
}
</style>